<template>
    <div>
        <div class="logo">
            <img src="../assets/logo-nobg-nopj.png" width="100" height="100" />
        </div>
        <div>
            <el-form>
                <el-form-item label="账号">
                    <el-input placeholder="请输入账号" v-model="username" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input placeholder="请输入密码" v-model="password" show-password />
                </el-form-item>    
                <hr/>
                <el-form-item  label-width="0" class="form-button-center">
                    <el-button class="button-centerd" type="primary" @click="onSubmit">登录</el-button>
                </el-form-item>
                <a class="small" v-on:click="toRegisterPage">注册</a>
                <br/>
                <a class="small" v-on:click="toForgetPasswordPage">忘记密码</a>
            </el-form>
        </div>
    </div>
</template>
  
<script>
    import server from "../config/server.config"
    import axios from "axios"
    import { ElMessage } from 'element-plus'
    import {setCookieByExpires} from "../util/cookie.util"
  export default {
    data(){
        return {
            "username":"",
            "password":"",  
        }
    },
    methods:{
        async onSubmit(){
            let res = await axios.post(server.CASSERVER,{"username":this.username,"password":this.password})
            if(res.status != 200){
                ElMessage({
                    showClose:true,
                    message:res.msg,
                    type:"error"
                })
            }else{
                let data = res.data;
                if(data.code == 200){
                    let expires = new Date(data.data.expires);
                    for(let i in res.data.data){
                        setCookieByExpires(i,res.data.data.expires[i],expires,"/");
                    }       
                    this.$router.push("/")
                }else{
                    ElMessage({
                        showClose:true,
                        message:"error:" + data.code +":"+data.msg,
                        type:"error"
                    })
                }
            }
        },
        toRegisterPage(){
            this.$router.push("/register")
        },
        toForgetPasswordPage(){

        }
    },
    beforeCreate() {
        document.querySelector('body').setAttribute('style', 'background:linear-gradient(to bottom,#ffeeee,#ddefbb)')
    },

    beforeDestroy() {
        document.querySelector('body').removeAttribute('style')
    },
  }
  
</script>

<style scoped>
    .button-centerd{
        display: block;
        margin:auto ;
    }
    a{
        font-size: 0.5em;
        cursor: pointer;
    }
</style>